<!DOCTYPE html>
<html>

<head>
    <!-- bower:css -->
    <link rel="stylesheet" href="../../node_modules/jquery-colorbox/example1/colorbox.css" />
    <link rel="stylesheet" href="../../node_modules/swipebox/src/css/swipebox.min.css" />
    <link rel="stylesheet" href="../../dist/css/justifiedGallery.css" />
    <!-- endbower -->
</head>

<body>
    <h1>Remote Images</h1>
    <p>The images are loaded by the browser in a random order. But the layout will appear row by row following the order.</p>
    <div id="remotetest" style="border: 1px solid black;">
        <a href="http://farm8.staticflickr.com/7431/10271435233_c0552862ee_b.jpg" title="San Vito Lo Capo">
            <img src="http://farm8.staticflickr.com/7431/10271435233_c0552862ee_b.jpg" />
        </a>
        <a href="http://farm9.staticflickr.com/8125/8988262620_29c4f210f8_b.jpg" title="Ponte del Diavolo">
            <img class="colorbox-165" src="http://farm9.staticflickr.com/8125/8988262620_29c4f210f8_b.jpg" />
        </a>
        <a href="http://farm8.staticflickr.com/7391/8842312290_f310d491f4_b.jpg" title="The Spring">
            <img class="colorbox-165" src="http://farm8.staticflickr.com/7391/8842312290_f310d491f4_b.jpg" />
        </a>
        <a href="http://farm9.staticflickr.com/8253/8811828736_88392f614a_b.jpg" title="Cat firmness">
            <img class="colorbox-165" src="http://farm9.staticflickr.com/8253/8811828736_88392f614a_b.jpg" />
        </a>
        <a href="http://farm9.staticflickr.com/8334/8400794773_932654a20e_b.jpg" title="Into The Sea">
            <img class="colorbox-165" src="http://farm9.staticflickr.com/8334/8400794773_932654a20e_b.jpg" />
        </a>
        <a href="http://farm9.staticflickr.com/8080/8346200014_778a360c36_b.jpg" title="First Sunset of the Year in Bologna">
            <img class="colorbox-165" src="http://farm9.staticflickr.com/8080/8346200014_778a360c36_b.jpg" />
        </a>
        <a href="http://farm9.staticflickr.com/8070/8157236803_78aa1698b6_b.jpg" title="Bologna's T-Day">
            <img class="colorbox-165" src="http://farm9.staticflickr.com/8070/8157236803_78aa1698b6_b.jpg" />
        </a>
        <a href="http://farm9.staticflickr.com/8336/8131259781_c7f436e4ed_b.jpg" title="Alone in the Snow">
            <img class="colorbox-165" src="http://farm9.staticflickr.com/8336/8131259781_c7f436e4ed_b.jpg" />
        </a>
        <a href="http://farm9.staticflickr.com/8332/8083451788_552becfbc7_b.jpg" title="What's your destination?">
            <img class="colorbox-165" src="http://farm9.staticflickr.com/8332/8083451788_552becfbc7_b.jpg" />
        </a>
        <a href="http://farm9.staticflickr.com/8179/7948632554_01f6ae6b6f_b.jpg" title="Just in a dream Place">
            <img class="colorbox-165" src="http://farm9.staticflickr.com/8179/7948632554_01f6ae6b6f_b.jpg" />
        </a>
        <a href="http://farm9.staticflickr.com/8174/7893834940_8fcbb47c14_b.jpg" title="Il Capo at Palermo">
            <img class="colorbox-165" src="http://farm9.staticflickr.com/8174/7893834940_8fcbb47c14_b.jpg" />
        </a>
        <a href="http://farm8.staticflickr.com/7131/7822678460_ee98ff1f69_b.jpg" title="Erice">
            <img class="colorbox-165" src="http://farm8.staticflickr.com/7131/7822678460_ee98ff1f69_b.jpg" />
        </a>
        <a href="http://farm9.staticflickr.com/8447/7746612082_a850ba837b_b.jpg" title="A painter in San Vito">
            <img class="colorbox-165" src="http://farm9.staticflickr.com/8447/7746612082_a850ba837b_b.jpg" />
        </a>
        <a href="http://farm9.staticflickr.com/8290/7644019668_61913c534c_b.jpg" title="Pescherie Vecchie">
            <img class="colorbox-165" src="http://farm9.staticflickr.com/8290/7644019668_61913c534c_b.jpg" />
        </a>
        <a href="http://farm9.staticflickr.com/8146/7452821434_aefd8e3e6f_b.jpg" title="A question of perspective">
            <img class="colorbox-165" src="http://farm9.staticflickr.com/8146/7452821434_aefd8e3e6f_b.jpg" />
        </a>
        <a href="http://farm8.staticflickr.com/7237/7392743904_c4f967bf94_b.jpg" title="Remember">
            <img class="colorbox-165" src="http://farm8.staticflickr.com/7237/7392743904_c4f967bf94_b.jpg" />
        </a>
        <a href="http://farm8.staticflickr.com/7221/7302459122_19fa1d8223_b.jpg" title="Truthful Innocence">
            <img class="colorbox-165" src="http://farm8.staticflickr.com/7221/7302459122_19fa1d8223_b.jpg" />
        </a>
        <a href="http://farm8.staticflickr.com/7100/7222046648_5bf70e893a_b.jpg" title="Simply my Brother">
            <img class="colorbox-165" src="http://farm8.staticflickr.com/7100/7222046648_5bf70e893a_b.jpg" />
        </a>
        <a href="http://farm6.staticflickr.com/5072/7002395006_29fdc85f7a_b.jpg" title="Freedom">
            <img class="colorbox-165" src="http://farm6.staticflickr.com/5072/7002395006_29fdc85f7a_b.jpg" />
        </a>
        <a href="http://farm8.staticflickr.com/7177/7062575651_b23918b11a_b.jpg" title="Maybe spring">
            <img class="colorbox-165" src="http://farm8.staticflickr.com/7177/7062575651_b23918b11a_b.jpg" />
        </a>
        <a href="http://farm8.staticflickr.com/7048/6841267340_855273fd7e_b.jpg" title="Love">
            <img class="colorbox-165" src="http://farm8.staticflickr.com/7048/6841267340_855273fd7e_b.jpg" />
        </a>
        <a href="http://farm8.staticflickr.com/7210/6958456697_e56a37bb5f_b.jpg" title="Young Lovers' Wall and the Old Rain">
            <img class="colorbox-165" src="http://farm8.staticflickr.com/7210/6958456697_e56a37bb5f_b.jpg" />
        </a>
        <a href="http://farm8.staticflickr.com/7195/6791628438_affaa19e10_b.jpg" title="This is the colors I love">
            <img class="colorbox-165" src="http://farm8.staticflickr.com/7195/6791628438_affaa19e10_b.jpg" />
        </a>
        <a href="http://farm8.staticflickr.com/7189/6916180091_9c9559e463_b.jpg" title="The Hope">
            <img class="colorbox-165" src="http://farm8.staticflickr.com/7189/6916180091_9c9559e463_b.jpg" />
        </a>
        <a href="http://farm8.staticflickr.com/7043/6880502467_d4b3c4b2a8_b.jpg" title="Florence streets. Florence people.">
            <img class="colorbox-165" src="http://farm8.staticflickr.com/7043/6880502467_d4b3c4b2a8_b.jpg" />
        </a>
        <a href="http://farm8.staticflickr.com/7193/6876412479_6268c6e2aa_b.jpg" title="I Love You">
            <img class="colorbox-165" src="http://farm8.staticflickr.com/7193/6876412479_6268c6e2aa_b.jpg" />
        </a>
        <a href="http://farm8.staticflickr.com/7154/6840627709_92ed52fb41_b.jpg" title="The painter in Florence">
            <img class="colorbox-165" src="http://farm8.staticflickr.com/7154/6840627709_92ed52fb41_b.jpg" />
        </a>
        <a href="http://farm8.staticflickr.com/7144/6812090617_5fd5bbdda0_b.jpg" title="Me and My Belover">
            <img class="colorbox-165" src="http://farm8.staticflickr.com/7144/6812090617_5fd5bbdda0_b.jpg" />
        </a>
        <a href="http://farm8.staticflickr.com/7142/6806687375_07d2b7a1f9_b.jpg" title="Fiocco">
            <img class="colorbox-165" src="http://farm8.staticflickr.com/7142/6806687375_07d2b7a1f9_b.jpg" />
        </a>
        <a href="http://farm8.staticflickr.com/7175/6798453217_72dea2d06e_b.jpg" title="My first clothespin">
            <img class="colorbox-165" src="http://farm8.staticflickr.com/7175/6798453217_72dea2d06e_b.jpg" />
        </a>
    </div>
    
    <!-- bower:js -->
    <script src="../../node_modules/jquery/dist/jquery.js"></script>
    <script src="../../node_modules/jquery-colorbox/jquery.colorbox.js"></script>
    <script src="../../node_modules/swipebox/src/js/jquery.swipebox.min.js"></script>
    <script src="../../dist/js/jquery.justifiedGallery.js"></script>
    <!-- endbower -->
    <script>
    $("#remotetest").justifiedGallery();
    </script>
</body>

</html>
